<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>社区</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/aui.css">
    <link rel="stylesheet" href="../css/aui-flex.css">
    <style>
        .aui-radio{
            width: 1rem !important;
            height: 1rem !important;
        }
        input.num{
            width: 70px;height: 20px;border-bottom: 1px solid #000;padding:0 5px;
        }
    </style>
</head>
<body style="background: #fff;" class="padding-b-3">
<header class="aui-bar aui-bar-nav bg-white">
    <div class="over-flow">
    <div class="aui-title color-blue aui-font-size-14">创建圈子条件</div>
    <a class="aui-pull-right   color-blue aui-font-size-14">
        完成
    </a>
    </div>

    <ul class="aui-list aui-media-list no-border aui-padded-b-5">
        <li class="aui-list-item aui-list-item-middle no-border">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media radius-50 aui-bg-default aui-padded-r-0" style="width: 3rem;height: 3rem;"> <i class="aui-iconfont margin-center aui-icon-camera font-weight-700"></i>
                </div>
                <div class="aui-list-item-inner aui-text-left aui-padded-l-5">
                    小超人
                </div>
            </div>
        </li>
    </ul>
</header>
<section class="aui-margin-t-10 bgf5">
    <div class="aui-padded-t-15">
    <ul class="aui-padded-r-10  aui-padded-l-10 bg-white">
        <li class="aui-border-b aui-padded-b-10 aui-padded-t-10">
            <div style="" class="display-flex flex-center">
                <div class="flex-1 aui-padded-r-5" style="">
                    <div class="font-size-16 font-weight-600">公开</div>
                    <div class="">任何人能够看到小组，组内成员和发布的内容。</div>
                </div>
                <div ><input class="aui-radio" type="radio" name="demo1" checked></div>
            </div>
        </li><li class="aui-border-b aui-padded-b-10 aui-padded-t-10">
            <div style="" class="display-flex flex-center">
                <div class="flex-1 aui-padded-r-5" style="">
                    <div class="font-size-16 font-weight-600">封闭</div>
                    <div class="">任何人都能找到小组并看到成员。只有成员能看到组内发布的内容。</div>
                </div>
                <div ><input class="aui-radio" type="radio" name="demo1" ></div>
            </div>
        </li><li class=" aui-padded-b-10 aui-padded-t-10">
            <div style="" class="display-flex flex-center">
                <div class="flex-1 aui-padded-r-5" style="">
                    <div class="font-size-16 font-weight-600">私密</div>
                    <div class="">只有小组成员能够找到小组、看到发布内容。</div>
                </div>
                <div ><input class="aui-radio" type="radio" name="demo1" ></div>
            </div>
        </li>
    </ul>
    </div>
</section>

<section class="aui-margin-t-10 font-size-13 aui-padded-t-15  over-flow bgf5">

        <div class="aui-padded-t-10 aui-padded-r-10 aui-padded-l-10 bg-white  over-flow">
    <div class="aui-text-danger">设置圈子期限：<label class="aui-padded-r-10"><input class="aui-radio" type="radio" name="date" checked> 3个月</label><label class="aui-padded-r-10"><input class="aui-radio" type="radio" name="date" > 6个月</label><label><input class="aui-radio" type="radio" name="date" > 9个月</label>
    </div>
    <div class="aui-padded-b-10 aui-padded-t-10">
        说明：在圈子期限内，退出圈子，将有连带惩罚，完成圈子时间，获得相应奖励
    </div>
    <div>
        <span class="aui-pull-left aui-inline">设定进入门槛：</span><input style="" class="num aui-pull-left aui-text-center" type="number"><span class="aui-pull-left aui-inline">到</span><input  class="num aui-pull-left aui-text-center"  type="number">
    </div>
    </div>
</section>
<footer class="aui-bar aui-bar-tab" id="footer">
    <div class="aui-bar-tab-item " >
        <i class="iconfont icon-qianbao-"></i>
        <div class="aui-bar-tab-label">钱包</div>
    </div>
    <div class="aui-bar-tab-item aui-active" >
        <i class="aui-iconfont aui-icon-comment"></i>
        <div class="aui-bar-tab-label">社区</div>
    </div>
    <div class="aui-bar-tab-item" >
        <i class="aui-iconfont aui-icon-my"></i>
        <div class="aui-bar-tab-label">个人中心</div>
    </div>
</footer>
</body>
</html>